<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改销售出库')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-chukuTest-edit" th:object="${xiaoshouChuku}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">出库单号：</label>
                <div class="col-sm-8">
                    <input name="chukuDanhao" readonly th:field="*{chukuDanhao}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">发货单号：</label>
                <div class="col-sm-8">
                    <input name="fahuoDanhao" readonly th:field="*{fahuoDanhao}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">销售日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="chukuDate" class="form-control" placeholder="yyyy-MM-dd" type="text"
                               th:value="${#dates.format(xiaoshouChuku.chukuDate, 'yyyy-MM-dd')}" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">项目名称：</label>
                <div class="col-sm-8">
                    <input name="xiangmuName" th:field="*{xiangmuName}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">业务员：</label>
                <div class="col-sm-8">
                    <input name="xiangmuMen" th:field="*{xiangmuMen}" class="form-control" type="text" list="yewuyuan">
                    <datalist id="yewuyuan" th:with="type=${@shangpinxinxiMapper.selectShangPinName()}">
                        <option  th:each="lists : ${type}"
                                 th:text="${lists.getShangpinName()+' | '+lists.getKaiXiang()}"
                                 th:value="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">发货人：</label>
                <div class="col-sm-8">
                    <input name="fahuoRen" class="form-control" type="text" th:field="*{fahuoRen}">
<!--                                        th:value="${@paibanMapper.selectPaibanByDate(#dates.format(#calendars.createNow(), 'yyyy-MM-dd')).getYuangongName()}"-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">收货地址：</label>
                <div class="col-sm-8">
                    <input name="shouhuoDizhi" th:field="*{shouhuoDizhi}" class="form-control" type="text" list="dizhi">
                    <datalist id="dizhi" th:with="type=${@shangpinxinxiMapper.selectShangPinName()}">
                        <option  th:each="lists : ${type}"
                                 th:text="${lists.getShangpinName()+' | '+lists.getKaiXiang()}"
                                 th:value="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">配套类型：</label>
                <div class="col-sm-8">
                    <select class="form-control" name="peitao1" th:with="type=${@dict.getType('sys_peitao')}" id="selected2peitao">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" onclick="change2down(this.value)"></option>
                    </select>
                </div>
                <script type="text/javascript">
                    window.addEventListener('DOMContentLoaded', (event) => {
                        change2down("整套门")
                    });
                    function change2down(value) {
                        var menlist = document.getElementById("menlist")
                        var menlist2you = document.getElementById("menlist2you")
                        var menset = document.getElementById("mensetting")
                        var kuanglist = document.getElementById("kuanglist")
                        var kuangset = document.getElementById("kuangsetting")
                        var wujinlist = document.getElementById("wujinlist")
                        switch (value) {
                            case "整套门":
                                menlist.hidden = false
                                menlist2you.hidden = true
                                menset.hidden = true
                                kuanglist.hidden = true
                                kuangset.hidden = true
                                wujinlist.hidden = true
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist1")
                                break
                            case "双开门":
                                menlist.hidden = false
                                menlist2you.hidden = false
                                menset.hidden = true
                                kuanglist.hidden = true
                                kuangset.hidden = true
                                wujinlist.hidden = true
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist4")
                                break
                            case "商品门框":
                                menlist.hidden = false
                                menlist2you.hidden = true
                                menset.hidden = true
                                kuanglist.hidden = false
                                kuangset.hidden = true
                                wujinlist.hidden = true
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist2")
                                break
                            case "定制门框":
                                menlist.hidden = false
                                menlist2you.hidden = true
                                menset.hidden = false
                                kuanglist.hidden = false
                                kuangset.hidden = false
                                wujinlist.hidden = true
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist2")
                                break
                            case "单订门扇":
                                menlist.hidden = false
                                menlist2you.hidden = true
                                menset.hidden = false
                                kuanglist.hidden = true
                                wujinlist.hidden = true
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist2")
                                break
                            case "单订门框":
                                menlist.hidden = true
                                menlist2you.hidden = true
                                kuanglist.hidden = false
                                kuangset.hidden = false
                                wujinlist.hidden = true
                                break
                            case "仅五金出入":
                                menlist.hidden = true
                                menlist2you.hidden = true
                                kuanglist.hidden = true
                                wujinlist.hidden = false
                                break
                            default:
                                break
                        }
                    }
                </script>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">配套类型：</label>
                <div class="col-sm-8">
                    <select class="form-control" name="peitao2">
                        <option value="常规五金配套" id="changgui" onclick="wujinReSet(this.value)">常规五金配套</option>
                        <option value="非常规五金配套" id="feichanggui" onclick="wujinReSet(this.value)">非常规五金配套</option>
                        <option value="不含五金" id="noWujin" onclick="wujinReSet(this.value)">不含五金</option>
                    </select>
                </div>
                <script type="text/javascript">
                    function wujinReSet(value) {
                        const wujinlist = document.getElementById("wujinlist");
                        var selected2 = document.getElementById("selected2peitao")
                        if (value === "常规五金配套" && selected2.value !== "仅五金出入"){
                            wujinlist.hidden = true
                        }
                        if (value === "非常规五金配套"){
                            wujinlist.hidden = false
                        }
                        if (value === "不含五金"){
                            wujinlist.hidden = true
                        }
                    }
                </script>
            </div>
            <div id="menlist">
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇名称：</label>
                    <div class="col-sm-8">
                        <input name="goodNameMen1"  th:field="*{goodNameMen1!=null?goodNameMen1:null}" onchange="men1set(this.value)" class="form-control" type="text" list="namelist1" id="input4name1">
                    </div>
                    <datalist id="namelist1"  th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%整套门%')}">
                        <option  th:each="lists : ${type}"
                                 th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                 th:text="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                    <datalist id="namelist2"  th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%门扇%')}">
                        <option  th:each="lists : ${type}"
                                 th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                 th:text="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                    <datalist id="namelist3" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%门框%')}">
                        <option  th:each="lists : ${type}"
                                 th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                 th:text="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                    <datalist id="namelist4" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%左扇%')}">
                        <option  th:each="lists : ${type}"
                                 th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                 th:text="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                    <script type="text/javascript">
                        function men1set(value) {
                            var str = value.split(" | ")[1]
                            var kaixiang = value.split(" | ")[2]
                            var kuan = str.split("*")[0]
                            var gao = str.split("*")[1]
                            document.getElementById("guiGeKuan1").value = kuan
                            document.getElementById("guiGeGao1").value = gao
                            document.getElementById("kaiXiang1").value = kaixiang
                            document.getElementById("input4name1").value = value.split(" | ")[0]
                        }
                    </script>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">防火门备注：</label>
                    <div class="col-sm-8">
                        <input name="beizhu1" class="form-control" type="text">
                    </div>
                </div>
                <div id="mensetting">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">门扇宽：</label>
                        <div class="col-sm-8">
                            <input name="men1shanKuan" class="form-control" type="text" id="guiGeKuan1" th:field="*{men1shanKuan!=null?men1shanKuan:null}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">门扇高：</label>
                        <div class="col-sm-8">
                            <input name="men1shanGao" class="form-control" type="text" id="guiGeGao1" th:field="*{men1shanGao!=null?men1shanGao:null}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">开向：</label>
                        <div class="col-sm-8">
                            <input name="kaiXiang1"  class="form-control" type="text" id="kaiXiang1" th:field="*{kaiXiang1!=null?kaiXiang1:null}">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇数量：</label>
                    <div class="col-sm-8">
                        <input name="men1Shuliang" class="form-control" type="text" th:field="*{men1Shuliang!=null?men1Shuliang:null}">
                    </div>
                </div>
            </div>
            <div id="menlist2you">
                <div class="form-group">
                    <label class="col-sm-3 control-label">右扇名称：</label>
                    <div class="col-sm-8">
                        <input name="goodNameMen2" th:field="*{goodNameMen2!=null?goodNameMen2:null}" onchange="men2set(this.value)" class="form-control" type="text" list="youlist" id="input4name2">
                        <datalist id="youlist" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%右扇%')}">
                            <option  th:each="lists : ${type}"
                                     th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                     th:text="${lists.getShangpinName()}">
                            </option>
                        </datalist>
                        <script type="text/javascript">
                            function men2set(value) {
                                var str = value.split(" | ")[1]
                                var kaixiang = value.split(" | ")[2]
                                var kuan = str.split("*")[0]
                                var gao = str.split("*")[1]
                                document.getElementById("guiGeKuan2").value = kuan
                                document.getElementById("guiGeGao2").value = gao
                                document.getElementById("kaiXiang2").value = kaixiang
                                document.getElementById("input4name2").value = value.split(" | ")[0]
                            }
                            function kuang2set(value) {
                                var str = value.split(" | ")[1]
                                var kaixiang = value.split(" | ")[2]
                                var kuan = str.split("*")[0]
                                var gao = str.split("*")[1]
                                document.getElementById("guiGeKuan3").value = kuan
                                document.getElementById("guiGeGao3").value = gao
                                document.getElementById("kaiXiang3").value = kaixiang
                                document.getElementById("input4name3").value = value.split(" | ")[0]
                            }
                        </script>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇规格宽：</label>
                    <div class="col-sm-8">
                        <input id="guiGeKuan2" name="men2shanKuan" class="form-control" type="text" th:field="*{men2shanKuan!=null?men2shanKuan:null}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇规格高：</label>
                    <div class="col-sm-8">
                        <input id="guiGeGao2" name="men2shanGao" class="form-control" type="text" th:field="*{men2shanGao}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇开向：</label>
                    <div class="col-sm-8">
                        <input id="kaiXiang2" name="kaiXiang2" class="form-control" type="text" th:field="*{kaiXiang2}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇数量：</label>
                    <div class="col-sm-8">
                        <input name="men2Shuliang" class="form-control" type="number"  th:field="*{men2Shuliang}">
                    </div>
                </div>
            </div>
            <div id="kuanglist">
                <div class="form-group">
                    <label class="col-sm-3 control-label">门框名称：</label>
                    <div class="col-sm-8">
                        <input id="input4name3"  th:field="*{goodNameKuang}" name="goodNameKuang" onchange="kuang2set(this.value)" class="form-control" type="text" list="kuangming">
                        <datalist id="kuangming" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%门框%')}">
                            <option  th:each="lists : ${type}"
                                     th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                     th:text="${lists.getShangpinName()}">
                            </option>
                        </datalist>
                    </div>
                </div>
                <div id="kuangsetting">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">门框宽：</label>
                        <div class="col-sm-8">
                            <input id="guiGeKuan3" name="kuangKuan" class="form-control" type="text" th:field="*{kuangKuan}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">门框高：</label>
                        <div class="col-sm-8">
                            <input id="guiGeGao3" name="kuangGao" class="form-control" type="text" th:field="*{kuangGao}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">门框开向：</label>
                        <div class="col-sm-8">
                            <input name="kaiXiang3" id="kaiXiang3" class="form-control" type="text" th:field="*{kaiXiang3}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">门框数量：</label>
                        <div class="col-sm-8">
                            <input name="kuangShuliang" class="form-control" type="text"  th:field="*{kuangShuliang}">
                        </div>
                    </div></div>
            </div>
            <div id="wujinlist">
                <div class="form-group">
                    <label class="col-sm-3 control-label">防火锁数量：</label>
                    <div class="col-sm-8">
                        <input name="shuliang1" class="form-control" type="text"  th:field="*{shuliang1}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">防火锁备注：</label>
                    <div class="col-sm-8">
                        <input name="beizhu2" class="form-control" type="text"  th:field="*{beizhu2}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">闭门器数量：</label>
                    <div class="col-sm-8">
                        <input name="shuliang2" class="form-control" type="text"  th:field="*{shuliang2}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">闭门器备注：</label>
                    <div class="col-sm-8">
                        <input name="beizhu3" class="form-control" type="text"  th:field="*{beizhu3}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">拉爆盖数量：</label>
                    <div class="col-sm-8">
                        <input name="shuliang3" class="form-control" type="text"  th:field="*{shuliang3}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">拉爆盖备注：</label>
                    <div class="col-sm-8">
                        <input name="beizhu4" class="form-control" type="text"  th:field="*{beizhu4}">
                    </div>
                </div></div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">销售金额：</label>
                <div class="col-sm-8">
                    <input name="zhonjine" th:field="*{zhonjine}" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "xiaoshouchuku/chukuTest";
        $("#form-chukuTest-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-chukuTest-edit').serialize());
            }
        }

        $("input[name='chukuDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        $(".file-upload").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
    </script>
</body>
</html>